<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>深度监视简写</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <h1>a的值为:{{number.a}}</h1>
            <button v-on:click="number.a++">点我值+1</button>
        </div>

        <script>
            const vm = new Vue({
                el:'#root',
                data:{
                    number:{
                        a:'2',
                        b:'5'
                    }
                },
                // watch: {
                //   'number.a':function(newValue1,oldValue1){
                //     console.log('a的值发生变化了',newValue1,oldValue1);
                //   }
                // },
            })

            vm.$watch('number.a', function(newValue, oldValue){
              console.log('a的值发生变化了',newValue,oldValue)
            });
        </script>
    </body>
</html>